<template>
  <div class="container">
    <!-- 搜索部分 -->
    <div class="search">
      <div class="sesrch-left">
        <div class="loge">
          <el-image class="addspace" :src="header_img" fit="cover"></el-image>
        </div>
        <div class="search-all">
          <el-input
            placeholder="请输入关键字检索"
            v-model="inputContent"
            class="search-input input-with-select"
            clearable
            @keyup.enter.native="searchText(inputContent)"
          >
            <el-select
              class=""
              v-model="selectLeft"
              slot="prepend"
              placeholder="用户电话"
            >
              <el-option label="餐厅名" value="1"></el-option>
              <el-option label="订单号" value="2"></el-option>
              <el-option label="用户电话" value="3"></el-option>
            </el-select>
            <template slot="append">
              <el-cascader
                v-model="Cityvalue"
                :options="Cityoptions"
                :show-all-levels="false"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"
              ></el-cascader>
            </template>
          </el-input>
          <el-button
            class="search-button"
            type="primary"
            slot="append"
            @click="searchText(inputContent)"
            >搜索</el-button
          >
        </div>
        <div class="search-banner">
          <el-button
            class="search-button"
            type="primary"
            icon="el-icon-edit"
            @click="ToPostMessage()"
          >
            发布信息
          </el-button>
        </div>
      </div>
      <div class="search-word">
        <span>热门搜索：</span>
        <span>机械</span>
        <span>化工石油</span>
        <span>生产</span>
        <span>挖掘机</span>
      </div>
    </div>
  </div>
</template>
<script>
import { throttle } from "../../common/public.js";
export default {
  components: {},
  data() {
    return {
      inputContent: "",
      selectLeft: "",
      searchinput: "",
      header_img: require("../../assets/images/header-loge.png"),
      Cityvalue: [],
      Cityoptions: [
        {
          value: "101010100",
          label: "北京",
          children: [
            {
              value: "101010100",
              label: "北京",
              province_name: "北京",
              parent_name: "中国",
              lng: "39.904989",
              lat: "116.405285"
            }
          ]
        },
        {
          value: "101020100",
          label: "上海",
          children: [
            {
              value: "101020100",
              label: "上海",
              province_name: "上海",
              parent_name: "中国",
              lng: "31.231706",
              lat: "121.472644"
            }
          ]
        },
        {
          value: "101030100",
          label: "天津",
          children: [
            {
              value: "101030100",
              label: "天津",
              province_name: "天津",
              parent_name: "中国",
              lng: "39.125596",
              lat: "117.190182"
            }
          ]
        },
        {
          value: "101040100",
          label: "重庆",
          children: [
            {
              value: "101040100",
              label: "重庆",
              province_name: "重庆",
              parent_name: "中国",
              lng: "29.291965",
              lat: "108.170255"
            }
          ]
        },
        {
          value: "101050101",
          label: "黑龙江",
          children: [
            {
              value: "101050101",
              label: "哈尔滨",
              province_name: "哈尔滨",
              parent_name: "中国",
              lng: "45.756967",
              lat: "126.642464"
            }
          ]
        },
        {
          value: "101050101",
          label: "黑龙江",
          children: [
            {
              value: "101050101",
              label: "哈尔滨",
              province_name: "哈尔滨",
              parent_name: "中国",
              lng: "45.756967",
              lat: "126.642464"
            }
          ]
        },

        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ]
    };
  },
  created() {
    //搜索广告链接
    //this.getserchLinks();
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f6f6f6");
  },
  methods: {
    //次级联动
    handleChange(value) {
      console.log(value);
    },
    //搜索
    searchText: throttle(function(name) {
      if (name != "") {
        sessionStorage.setItem("SearchTextlist", name);
        this.$router.push("/SearchText");
      } else {
        this.showError("error", "请输入查询内容！");
      }
    }, 1000),
    //链接首页
    Topage() {
      this.$router.push("/");
    },
    //发布文章
    ToPostMessage() {
      this.$router.push("/PostMessage");
    },
    //消息提示
    showError(type, status) {
      this.$message({
        type: type,
        showClose: true,
        center: true,
        message: status
      });
    }
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }
};
</script>
<style lang="scss">
@import "../../assets/css/theme";
.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  min-width: 1200px;
  height: auto;
  padding: 20px 18.15% 20px 18.15%;
  background: #ffffff;
  .search {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    min-width: 850px;
    height: auto;
    //  background: #212121;
    .sesrch-left {
      display: flex;
      justify-content: space-between;
      .loge {
        width: 20.8%;
        height: 114px;
        .loge-img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
      .search-all {
        display: flex;
        justify-content: flex-start;
        width: 66%;
        height: 56+51-20px;
        padding-top: 51-20px;
        padding-left: 79px;
        .search-input {
          width: 80%;
          height: 56px;
          border: 2px solid #ee181e;
          .el-input {
            width: 100px;
            .el-input__inner {
              width: auto;
              height: 40px;
              border: none;
            }
            .el-input__suffix {
              padding-right: 5px;
              border-right: 1px solid #cccccc;
            }
          }
          .el-input-group__append {
            padding-right: 5px;
          }
          .el-input-group__append /deep/ .el-input__suffix {
            border-right: none;
          }
          .el-input-group__append /deep/ .el-input__inner {
            width: 100px;
            border-left: 1px solid #cccccc;
            padding: 0 10px 0 10px;
          }
          .el-input__inner {
            width: auto;
            height: 56px;
            border: none;
          }
        }
        .el-input-group__append,
        .el-input-group__prepend {
          background-color: #ffffff;
          color: #909399;
          vertical-align: middle;
          display: table-cell;
          position: relative;
          border: none;

          border-radius: 4px;
          padding: 0 20px;
          width: 1px;
          white-space: nowrap;
        }
        .search-button {
          width: 115px;
          height: 60px;
          background: #ee181e;
          border: 2px solid #ee181e;
          border-radius: 0px;
          color: #ffffff;
          font-size: 22px;
        }
      }

      .search-banner {
        width: 17%;
        height: 56px;
        padding-top: 51-20px;
        padding-left: 10px;
        .search-button {
          width: 129px;
          height: 60px;
          background: #ee181e;
          border: 2px solid #ee181e;
          border-radius: 0px;
          color: #ffffff;
          font-size: 16px;
        }
      }
    }
    .search-word {
      width: 100%;
      height: 25px;
      text-align: left;
      font-size: 16px;
      color: #686868;
      padding-left: 26.2%;
      span {
        padding-left: 8px;
      }
    }
  }
}
</style>
